<script lang="ts" setup>
type ToggleButtonAppearance = 'outline' | 'primary' | 'subtle' | 'transparent';
type ToggleButtonShape = 'circular' | 'rounded' | 'square';
type ToggleButtonSize = 'large' | 'medium' | 'small';
type ButtonType = 'button' | 'reset' | 'submit';

withDefaults(
  defineProps<{
    appearance?: ToggleButtonAppearance;
    disabled?: boolean;
    disabledFocusable?: boolean;
    iconOnly?: boolean;
    mixed?: boolean;
    // pressed prop removed as it's now handled by defineModel
    shape?: ToggleButtonShape;
    size?: ToggleButtonSize;
    type?: ButtonType;
    value?: string;
  }>(),
  {
    appearance: 'primary',
    disabled: false,
    disabledFocusable: false,
    iconOnly: false,
    mixed: false,
    shape: undefined,
    size: undefined,
    type: 'button',
    value: undefined,
  },
);

const emit = defineEmits<{
  // Event names with their expected arguments
  click: [event: Event];
  press: [pressed: boolean];
  // update:pressed emission is removed as it's handled by defineModel
}>();

// Define the model with 'pressed' as argument
const pressed = defineModel<boolean>({
  default: false,
});

const handleClick = (event: Event) => {
  emit('click', event);
  // Toggle button natively toggles the pressed state when clicked
  // Update the model directly instead of emitting event
  const newPressedState = !pressed.value;
  pressed.value = newPressedState;
  emit('press', newPressedState);
};
</script>

<template>
  <fluent-toggle-button
    :appearance="appearance"
    :disabled="disabled"
    :disabled-focusable="disabledFocusable"
    :icon-only="iconOnly"
    :mixed="mixed"
    :pressed="pressed"
    :shape="shape"
    :size="size"
    :type="type"
    :value="value"
    @click="handleClick"
  >
    <slot></slot>
  </fluent-toggle-button>
</template>

<style scoped></style>
